<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图 -->
        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入内容" v-model="queryInfo.query"
                        clearable @clear="getGoodsList"
                    >
                    <el-button slot="append" icon="el-icon-search"
                      @click="getGoodsList"
                    ></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="goAddpage">添加商品</el-button>
                </el-col>
            </el-row>
            <!-- table表格区域 -->
            <el-table :data="goodsList" border stripe>
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column label="商品名称" prop="goods_name"></el-table-column>
                <el-table-column label="商品价格（元）" prop="goods_price" width="110px"></el-table-column>
                <el-table-column label="商品重量" prop="goods_weight" width="70px"></el-table-column>
                <el-table-column label="创建时间" width="140px">
                    <template slot-scope="scope">
                        <!-- 使用过滤器渲染出真正的时间 -->
                        {{scope.row.add_time | dateFormat}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="130px">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" icon="el-icon-edit"></el-button>
                        <el-button size="mini" type="danger" icon="el-icon-delete"
                            @click="removeById(scope.row.goods_id)"
                        ></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total" background
            >
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    export default {
        name:"List",
        data() {
            return {
                // 定义需要向服务器提交的参数
                queryInfo:{
                    // 查询参数 
                    query:"",
                    // 当前页码：默认显示第一页
                    pagenum:1,
                    // 每页显示条数
                    pagesize:10
                },
                // 存储请求回来的分页商品列表
                goodsList:[],
                // 服务器返回的总数据条数
                total:0
            }
        },
        created() {
            this.getGoodsList();
        },
        methods: {
            // 根据分页获取对应的商品列表
            async getGoodsList() {
                const {data:res} = await this.$http.get("goods", {
                    params:this.queryInfo
                });
                if(res.meta.status !== 200) return this.$message.error("获取商品列表失败！");
                // 把数据存储到本地
                this.goodsList = res.data.goods
                this.total = res.data.total
            },
            handleSizeChange(newSize) {
                this.queryInfo.pagesize = newSize;
                // 刷新数据
                this.getGoodsList();
            },
            handleCurrentChange(newPage) {
                this.queryInfo.pagenum = newPage;
                this.getGoodsList();
            },
            // 删除商品
            async removeById(id) {
                const confirmResult = await this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err => err);
                if(confirmResult !== "confirm") return this.$message.info("已取消删除");
                // 发起请求
                const {data:res} = await this.$http.delete("goods/" + id);
                if(res.meta.status !== 200) return this.$message.error("删除失败！");

                this.$message.success("删除成功！");
                // 重新刷新数据列表 
                this.getGoodsList()
            },
            //跳转添加商品页面
            goAddpage() {
                this.$router.push("goods/add")


            }




        },
    }
</script>

<style lang="less" scoped>

</style>